<template>
    <div class="toast">
  
       <!-- 类名
        // success 成功  icon-toast_chenggong
        // warning 警告 icon-toast-jinggao
        // danger 失败 icon-toast-shibai_huaban 
       -->
       <!-- 三目表达式，可以直接判断是否显示哪个类名 -->
        <i :class="type=='success'?'icon-toast_chenggong':(type=='warning'?'icon-toast-jinggao':'icon-toast-shibai_huaban')" class="iconfont"></i>
        <span>{{msg}}</span>   
    </div>
</template>
  
<script>
import {mapState} from "vuex"
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Toast',
    data () {
      return {

        }
    },
    computed:{
        ...mapState({
           msg: state=>state.logintoast.msg,
           type: state=>state.logintoast.type,
        })
    }
}
</script>
   
<style lang = "less" scoped>
      .toast{
        position: fixed;
        z-index: 3;
        left: 50%;
        top: 37px ;
        transform: translate(-50%);
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        box-shadow: 0  0 10px #fff;
        i{margin-right: 5px;}
      }
      .icon-toast-shibai_huaban{
        color:red;
      }
      .icon-toast_chenggong{
        color:green;
      }
      .icon-toast-jinggao{
        color:orange;
      }
</style>